<template>
  <div class="centerThree">
    <div class="c-f-l">
      <div class="c-f-l-top">
        <div class="c-center-l">
          <div class="c-center-l-l">
            <div style="position: relative">
              <img src="@/assets/newDashboard/记录总数.png" alt="" style="width: 5.7292vw; height: 10.1852vh; margin-left: -0.2604vw" />
              <!-- <img
                src="@/assets/newDashboard/记录总数.png"
                alt=""
                style="
                  position: absolute;
                  right: -45%;
                  top: -35%;
                  width: 4.4667vw;
                  height: 8.4074vh;
                "
              /> -->
            </div>
          </div>
          <div class="c-center-l-r" style="margin-left: 1.3021vw">
            <div class="c-c-l-r-top">
              <div class="r-top-text">记录总数</div>
              <div class="r-top-text-img">
                <!-- <img src="@/assets/index/箭头.png" alt="" /> -->
              </div>
            </div>
            <div class="c-c-l-r-foot">
              <div class="r-foot-l">
                <!-- {{ allRecording }} -->
                <countTo :startVal="0" ref="countTos" :endVal="sumNum * 1" :duration="3000"></countTo>
              </div>
              <div class="r-foot-r r-top-text">条</div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-f-l-foot">
        <div class="c-f-l-foot-box" v-for="(item, index) in recordingList" :key="index">
          <img src="@/assets/newDashboard/022.png" alt="" />
          <div class="c-f-l-f-box">
            <div class="c-f-l-f-box-l">
              {{ item.name }}
            </div>
            <div class="c-f-l-f-box-r">
              <div class="c-f-l-f-box-r-l">
                <!-- {{ item.value }} -->
                <countTo :startVal="0" ref="countTos" :endVal="item.value * 1" :duration="3000"></countTo>
              </div>
              <div class="c-f-l-f-box-r-r">条</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to' //终端输入npm install vue-count-to --legacy-peer-deps
import { getDashboard } from '@/api/index/index.js'
import { mapState } from 'vuex'

import Cookies from 'js-cookie'
export default {
  name: 'SdssJddsZhgjWebCenterThree',
  components: {
    countTo,
  },
  data() {
    return {
      sumNum: '',
      time: null,
      recordingList: [
        {
          name: '全量数据区',
          value: '',
        },
        {
          name: '核心数据区',
          value: '',
        },
        {
          name: '主题数据区',
          value: '',
        },
      ],
    }
  },
  computed: {
    ...mapState({
      token: (state) => state.user.token,
    }),
  },
  mounted() {
    this.time = setInterval(() => {
      if (Cookies.get('Admin-Token')) {
        this.getData()
      }
    }, 1000)
  },
  methods: {
    getData() {
      getDashboard().then((res) => {
      
        if (res.data.code == 0) {
          clearInterval(this.time)
          const result = res.data.data
          this.sumNum = result.sumTotal
          this.recordingList[0].value = result.fullDoseTotal
          this.recordingList[1].value = result.kernelTotal
          this.recordingList[2].value = result.themeTotal
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.centerThree {
  width: 40%;
  height: 100%;
  // background-color: purple;
  margin-right: 0.5vw;
}
.c-f-l,
.c-f-r {
  width: 100%;
  height: 100%;
  border-radius: 0.2604vw;
  box-sizing: border-box;
  box-shadow: 0px 0.2083vw 0.8333vw 13.0208vw rgba(2, 54, 68, 0.8) inset;
}

.c-f-l-top {
  padding: 0.6021vw 0 0.9375vw 2.6042vw;
  height: 10vh;
}

.c-f-l-foot {
  width: 100%;
  padding: 0 1.3021vw;
  height: 27vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.c-f-l-foot-box {
  position: relative;
  margin-bottom: 0.7407vh;
}

.c-f-l-foot-box img {
  width: 16.8854vw;
  height: 5.5556vh;
}

.c-f-l-f-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.0417vw;
  box-sizing: border-box;
}

.c-f-l-f-box-l {
  // font-size: 0.9375vw;
  // color: #ffffff;
  font-size: 0.7292vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.c-f-l-f-box-r {
  display: flex;
  align-items: center;
}

.c-f-l-f-box-r-l {
  // font-size: 1.0417vw;
  // color: #ffffff;
  font-weight: 600;
  font-size: 1.25vw;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
}

.c-f-l-f-box-r-r {
  margin-left: 0.4167vw;
  // font-size: 0.9375vw;
  // color: #ffffff;

  font-size: 0.7292vw;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
.c-center-l {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.c-center-l-l img {
  width: 4.1667vw;
  height: 7.4074vh;
}

.c-center-l-r {
  height: 100%;
  // padding-top: calc(var(--num)*10px);
  // box-sizing: border-box;
  margin-left: 0.5208vw;
  margin-bottom: 1.0417vw;
}

.c-c-l-r-top {
  display: flex;
  align-items: center;
}

.r-top-text {
  font-size: 0.8333vw;
  color: #ffffff;
}

.r-top-text-img {
  margin-left: 0.4167vw;
}

.r-top-text-img img {
  width: 0.6771vw;
  height: 0.8333vh;
}

.c-c-l-r-foot {
  margin-top: 0.0482vh;
  display: flex;
  align-items: baseline;
}

.r-foot-l {
  font-size: 1.0417vw;
  font-family: DINPro;
  font-weight: 500;
  color: #3bf5ff;
}

.r-foot-r {
  margin-left: 0.5208vw;
  margin-top: 0.5208vw;
}
</style>
